<style rel="stylesheet/scss" lang="scss" scoped>
  .active{
    background-color: #0077B1;
  }
  .taskUl li{
    color: white;
  }
</style>
<template>
  <div class="app-container">
    <el-row type="flex" class="row-bg">
      <div>
        <TaskZxEchars :dataInfo="this.aa" :width="width" />
      </div>
    </el-row>
    <el-row>
      <el-collapse v-model="activeNames" >
        <el-collapse-item title="列表展示" name="2">
          <!--表格渲染-->
          <div style="margin-top: 20px">
            <el-table
              ref="table"
              :data="dataList"
              style="width: 100%;"
              height="450"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              @filter-change="taskStatusDictChange"
            >
              <el-table-column  prop="bizDate" label="业务日期" min-width="100" >
                <template slot-scope="scope">
                  <i class="el-icon-time" v-if="scope.row.bizDate"></i>
                  <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
                </template>
              </el-table-column>
              <el-table-column  prop="taskCode" label="任务名称(编码)"  min-width="200" :formatter="formattertaskName" />

              <el-table-column  prop="taskStatus" label="任务状态"
                                :formatter="taskStatusFormatter"
                                :filters="taskStatusDict"
                                key="taskStatus"
                                filter-placement="bottom-end" :filter-multiple="false" min-width="120" column-key="taskStatus">

                  <template slot-scope="scope">
                      <el-tag size="medium" :type="formatterTaskStatusType(scope.row.taskStatus)"  >
                          {{formatterTaskStatus(scope.row.taskStatus)}}
                      </el-tag>
                  </template>
              </el-table-column>
              <el-table-column  prop="execStTs" label="开始执行时间" min-width="180" />
              <el-table-column  prop="execEndTs" label="执行结束时间" min-width="180" />
              <el-table-column  prop="costTs" label="耗时"/>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-row>
  </div>
</template>
<script>
  import TaskZxEchars from '../../../components/TaskZxEchars'
  import jobDef from '@/api/cycleJob/job_def'
  const defaultForm = {}
  export default {
    name: 'cycletaskEchars',
    components: {TaskZxEchars},
    props: {
      taskCode: {
        type: String,
        default: ''
      },
    },
    dicts: ['task_status'],
    data() {
      return {
        activeClass: -1,
        activeName: '1',
        aa:{},
        activeNames:[1],
        taskDefList:[],
        dataList:[],
        width:'100%',
        taskDict:[],
        taskStatusDict:[]
      };
    },
    created(){
      //初始化任务数据
      this.initTaskList();
      this.width = window.innerWidth * 0.9 + 'px'
      this.taskDict=this.dict.task_status;
    },
    watch:{
      taskDict(){
        this.$nextTick(()=>{
          this.taskDict.forEach(item=>{
            var obj={
              text:item.label,
              value:item.value
            }
            this.taskStatusDict.push(obj);
          })
        })
      }
    },
    methods:{
      taskStatusDictChange(filters){
        var param = {
          taskCode:this.taskCode,
          taskStatus:filters.taskStatus[0]
        }
        jobDef.qryTaskInfoByTables(param).then(res=>{
          this.dataList=res;
        })
      },
      formattertaskName(val){
        return val.taskName+"("+val.taskCode+")"
      },
      formatterCostTs(val){
        var date1 = new Date(val.execStTs)
        var date2 = new Date(val.execEndTs)
        var s1 = date1.getTime(),s2 = date2.getTime();
        var total = (s2 - s1)/1000;
        var hour,minute,second,module
        if(total>=3600){
          hour=parseInt(total/3600)
          module=parseInt((total-hour*60*60)/60)
          return hour+"时"+module+"分"
        }else if(total>=60 && total<3600){
          minute=parseInt(total/60)
          module=parseInt((total-minute*60)/60)
          return minute+"分"+module+"秒"
        }else{
          second=total
          return second+"秒"
        }
      },
      taskStatusFormatter(row, column){
        return this.dict.label.task_status[row.taskStatus]
      },
      formatterTaskStatusType(val) {
        const type = ['','info','primary','','success','danger','warning']
        return type[val]
      },
      formatterTaskStatus(val) {
        return this.dict.label.task_status[val]
      },
      initTaskList(){
        if(this.taskCode!=''){
          jobDef.qryTaskInfoByEchars(this.taskCode).then(res=>{
            this.aa = res;
          })
          var params = {
            taskCode:this.taskCode,
            taskStatus:""
          }
          jobDef.qryTaskInfoByTables(params).then(res=>{
            this.dataList=res;
          })
        }
      },
      handleChange(){
        this.aa = {isOrder:'1'}
      },
      //选择某个任务的实例图
      selectTask(param){
        jobDef.qryTaskInfoByEchars(param).then(res=>{
          this.aa = res;
        })
      },
      getItem(index){
        this.activeClass = index
      }
    },

  }


</script>
